<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>选中的数据</title>
    <script src="/static/js/JsBarcode.all.min.js"></script>
    <style>
        body{
            margin:0;
        }
        canvas{
            display: block !important;
            width: 400px !important;
            height: 30px !important;
        }
        .data-row{
            border-bottom: 10px solid #000; 
        }

        #inventory-code{
            font-size : larger;
        }
        
        #inventory-name {
            font-size : larger;
        }
        
        #batch-number {
            font-size : larger;
        }
        #production-date{
                display: inline-block;
                margin-right: 5px;
        }
        #qualified-quantity{
                display: inline-block;
        }
        
        @media print {
            @page {
          margin: 0.3cm;
          size:60mm 30mm;
        }
        canvas{
            margin-left: auto !important;
            margin-right: auto !important;
        }
        .data-row {
            page-break-before: always;
        }
        /* 隐藏不需要打印的部分 */
        .data-value-input{
            display:none;
        }
        .data-row {
            border-bottom: none;
        }
        header,
        nav,
        h1 {
          display: none;
        }
        }

    </style>
</head>
<body>
    <h1>选中的数据</h1>
    <header>
      <nav>
        <button id="backButton">返回首页</button>
        <button id="printButton">点击我打印</button>
      </nav>
    </header>
    <div id="data-container" class="data-container">
        <!-- 数据行将在这里动态添加 -->
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {

            // 获取打印按钮元素
            var printButton = document.getElementById("printButton");
            printButton.addEventListener("click", function () {
                // 直接调用window.print()方法来触发打印对话框
                window.print();
            });

            // 获取返回按钮元素
            var backButton = document.getElementById("backButton");
            backButton.addEventListener("click", function () {
                // 跳转到首页
                window.location.href = "http://192.168.12.2:9000"; // 确保这是正确的URL
            });


            var data = {{ data|safe }}; // 假设 data 是一个包含对象的数组

            var container = document.getElementById("data-container");

            data.forEach(function (rowData) {
                var row = document.createElement("div");
                row.className = "data-row";

                var contents = [
                    { label: "存货编码", data: rowData["存货编码"] },
                    { label: "存货名称", data: rowData["存货名称"] },
                    { label: "批号", data: rowData["批号"] },
                    { label: "生产日期", data: rowData["生产日期"] },
                    { label: "合格数量", data: rowData["合格数量"] },
                    { label: "品牌", data: rowData["品牌"] },
                    { label: "规格型号", data: rowData["规格型号"] },
                ];

                contents.forEach(function (content, index) {
                    var labelValueDiv = document.createElement("div");
                    labelValueDiv.className = "data-label-value";

                    // 根据标签内容设置id
                    switch (content.label) {
                        case "存货编码":
                            labelValueDiv.id = "inventory-code";
                            break;
                        case "存货名称":
                            labelValueDiv.id = "inventory-name";
                            break;
                        case "批号":
                            labelValueDiv.id = "batch-number";
                            break;
                        case "生产日期":
                            labelValueDiv.id = "production-date";
                            break;
                        case "合格数量":
                            labelValueDiv.id = "qualified-quantity";
                            break;
                        // 其他情况不需要设置id，可以省略default
                    }

                    var labelSpan = document.createElement("span");
                    labelSpan.className = "data-label";
                    labelSpan.textContent = content.label + ": ";

                    var valueSpan = document.createElement("span");
                    valueSpan.className = "data-value";
                    valueSpan.textContent = content.data;

                    // 创建input元素，仅当标签为"合格数量"时
                    // index.html中input的宽度
                    // <input type="text" style="width:50px;">
                    if (content.label === "合格数量") {
                        var inputField = document.createElement("input");
                        inputField.type = "text";
                        inputField.placeholder = "修改合格数量"; // 设置placeholder
                        inputField.value = "";
                        inputField.className = "data-value-input";
                        inputField.addEventListener("input", function() {
                            if (this.value.trim() !== ""){
                                valueSpan.textContent = this.value;
                            }
                            else{
                                valueSpan.textContent = content.data;
                            }
                            
                        });
                        // 替换valueSpan为inputField
                        labelValueDiv.appendChild(labelSpan);
                        labelValueDiv.appendChild(valueSpan);
                        labelValueDiv.appendChild(inputField);
                    } else {
                        // 将label和value放入labelValueDiv
                        labelValueDiv.appendChild(labelSpan);
                        labelValueDiv.appendChild(valueSpan);
                    }

                    // 将labelValueDiv添加到行中
                    row.appendChild(labelValueDiv);

                    // 为需要的字段添加条形码
                    if (["存货编码", "批号"].includes(content.label)) {
                        var barcodeCanvas = document.createElement("canvas");
                        barcodeCanvas.className = "barcode-canvas";
                        JsBarcode(barcodeCanvas, content.data, { format: "CODE128" });
                        row.appendChild(barcodeCanvas);
                    }
                });

                container.appendChild(row);
            });
        });
    </script>
</body>
</html>